<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <link rel="stylesheet/less" href="./assets/style/reset.less" />
    <link rel="stylesheet/less" href="./assets/style/common.less" />
    <link rel="stylesheet/less" href="./assets/style/home.less" />
    <link rel="stylesheet/less" href="./assets/style/home.header.less" />
    <link rel="stylesheet/less" href="./assets/style/home_shortcut.less" />
    <link rel="stylesheet/less" href="./assets/style/home_sale.less" />
    <link rel="stylesheet/less" href="./assets/style/home_product.less" />
    <link rel="stylesheet/less" href="./assets/style/home_tabbar.less" />
    <script src="./assets/vendor/less.min.js"></script>
    <title>仿京东商城M站</title>
  </head>
  <body>
    <!-- 顶部栏 -->
    <header>
      <div class="menu">
        <img src="./assets/img/icon_menu.png" alt="" />
      </div>
      <div class="search">
        <div class="search__icon">
          <img src="./assets/img/icon_search.png" alt="" />
        </div>
        深度烘焙意式咖啡
      </div>
      <div>登录</div>
    </header>

    <!-- 快捷按钮 -->
    <div class="shortcut">
      <div class="item">
        <img src="./assets/img/shortcut_01.png" alt="" />
        <p>京东超市</p>
      </div>
      <div class="item">
        <img src="./assets/img/shortcut_02.png" alt="" />
        <p>京东电器</p>
      </div>
      <div class="item">
        <img src="./assets/img/shortcut_03.png" alt="" />
        <p>服饰美妆</p>
      </div>
      <div class="item">
        <img src="./assets/img/shortcut_04.png" alt="" />
        <p>充值中心</p>
      </div>
      <div class="item">
        <img src="./assets/img/shortcut_05.png" alt="" />
        <p>PLUS会员</p>
      </div>
    </div>

    <!-- 京东秒杀 -->
    <div class="sale-area">
      <div class="sale__bg">
        <img src="./assets/img/sale_bg.png" alt="" />
      </div>
      <div class="sale">
        <div class="sale__info">
          <img src="./assets/img/sale_logo.png" alt="" />
          <div class="sale__title">限时低价</div>
          <div class="sale__btn">
            <span>去抢购</span>
            <img src="./assets/img/icon_arrow.png" alt="" />
          </div>
        </div>
        <div class="sale__list">
          <div class="item">
            <img src="./assets/img/sale_01.jpg" alt="" />
            <p class="sale__price">¥11.2</p>
          </div>
          <div class="item">
            <img src="./assets/img/sale_02.jpg" alt="" />
            <p class="sale__price">¥812</p>
          </div>
          <div class="item">
            <img src="./assets/img/sale_03.jpg" alt="" />
            <p class="sale__price">¥27.9</p>
          </div>
          <div class="item">
            <img src="./assets/img/sale_04.jpg" alt="" />
            <p class="sale__price">¥69.9</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="product-list-wrapper">
      <div class="product-list">
        <div class="product">
          <img
            class="product__cover"
            src="./assets/img/product_01.webp"
            alt="" />
          <div class="product__info">
            <div class="product__title product__title--supermarket">
              郎酒 小郎酒经典款 浓酱兼香型白酒 45度100ml*12瓶 整箱装（非原箱）
            </div>
            <div class="product__row">
              <div class="product__feature product__feature--double">
                买贵双倍赔
              </div>
              <div class="product__feature product__feature--low">
                15天最低价
              </div>
            </div>
            <div class="product__row">
              <div class="product__price">
                <span class="big_txt">¥200</span>.00
              </div>
              <div class="product__ticket">
                <img src="./assets/img/icon_ticket.png" alt="" />
                <span class="txt">满100享9.5折</span>
              </div>
            </div>
            <div class="product__row">
              <div class="product__tag">
                <img src="./assets/img/icon_autotrophic.png" alt="" />
              </div>
              <div class="product__comment">1万+条评论</div>
              <div class="product__similarity">看相似</div>
            </div>
          </div>
        </div>
        <div class="product">
          <img
            class="product__cover"
            src="./assets/img/product_03.webp"
            alt="" />
          <div class="product__info">
            <div class="product__title product__title--world">
              Blackmores 维生素C超高浓度澳洲进口1000mg150粒 提高抵抗力
            </div>
            <div class="product__row">
              <div class="product__price">
                <span class="big_txt">¥200</span>.00
              </div>
            </div>
            <div class="product__row">
              <div class="product__comment">10万+条评论</div>
              <div class="product__similarity">看相似</div>
            </div>
          </div>
        </div>
        <div class="product">
          <img
            class="product__cover"
            src="./assets/img/product_05.webp"
            alt="" />
          <div class="product__info">
            <div class="product__title product__title--supermarket">
              洁柔厨房抽纸75抽*4包双层加厚吸水吸油大规格 新老品交替发货
            </div>
            <div class="product__row">
              <div class="product__feature product__feature--low">
                60天最低价
              </div>
            </div>
            <div class="product__row">
              <div class="product__price">
                <span class="big_txt">¥15</span>.99
              </div>
            </div>
            <div class="product__row">
              <div class="product__tag">
                <img src="./assets/img/icon_autotrophic.png" alt="" />
              </div>
              <div class="product__comment"></div>
              <div class="product__similarity">看相似</div>
            </div>
          </div>
        </div>
        <div class="product">
          <img
            class="product__cover"
            src="./assets/img/product_06.webp"
            alt="" />
          <div class="product__info">
            <div class="product__title">
              宏碁（acer）墨舞air【国家补贴20%】
              大容量高性能14英寸办公学生轻薄笔记本电脑 全国联保512G固态
            </div>
            <div class="product__row">
              <div class="product__feature product__feature--double">
                买贵双倍赔
              </div>
            </div>
            <div class="product__row">
              <div class="product__price">
                <span class="big_txt">¥1899</span>.00
              </div>
            </div>
            <div class="product__row">
              <div class="product__comment">500+条评论</div>
              <div class="product__similarity">看相似</div>
            </div>
          </div>
        </div>
      </div>
      <div class="product-list">
        <div class="product">
          <img
            class="product__cover"
            src="./assets/img/product_02.webp"
            alt="" />
          <div class="product__info">
            <div class="product__title">
              藤朝家具（Teng chao jia
              ju）户外编藤桌椅套装组合别墅庭院休闲家具懒人小户型藤桌椅
              6+1【240C塑木伸缩长桌】
            </div>
            <div class="product__row">
              <div class="product__feature product__feature--low">
                90天最低价
              </div>
            </div>
            <div class="product__row">
              <div class="product__price">
                <span class="big_txt">¥3380</span>.00
              </div>
            </div>
            <div class="product__row">
              <div class="product__comment">9条评论</div>
              <div class="product__similarity">看相似</div>
            </div>
          </div>
        </div>
        <div class="product">
          <img
            class="product__cover"
            src="./assets/img/product_04.webp"
            alt="" />
          <div class="product__info">
            <div class="product__title product__title--supermarket">
              维德一次性医用口罩成人50只/盒独立包装三层透气防过敏防飞沫灭菌级
            </div>
            <div class="product__row">
              <div class="product__feature product__feature--double">
                买贵双倍赔
              </div>
            </div>
            <div class="product__row">
              <div class="product__price">
                <span class="big_txt">¥14</span>.00
              </div>
              <div class="product__feature product__feature--double">
                2件9.5折
              </div>
            </div>
            <div class="product__row">
              <div class="product__tag">
                <img src="./assets/img/icon_autotrophic.png" alt="" />
              </div>
              <div class="product__comment">98%好评率</div>
              <div class="product__similarity">看相似</div>
            </div>
          </div>
        </div>
        <div class="product">
          <img
            class="product__cover"
            src="./assets/img/product_07.webp"
            alt="" />
          <div class="product__info">
            <div class="product__title product__title--supermarket">
              统一 雅哈 意式醇香拿铁咖啡280ml*15瓶/箱 （新旧包装交替发货）
            </div>
            <div class="product__row">
              <div class="product__feature product__feature--double">
                买贵双倍赔
              </div>
            </div>
            <div class="product__row">
              <div class="product__price">
                <span class="big_txt">¥39</span>.10
              </div>
              <div class="product__ticket">
                <img src="./assets/img/icon_ticket.png" alt="" />
                <span class="txt">满100享9.5折</span>
              </div>
            </div>
            <div class="product__row">
              <div class="product__tag">
                <img src="./assets/img/icon_autotrophic.png" alt="" />
              </div>
              <div class="product__comment">10万+条评论</div>
              <div class="product__similarity">看相似</div>
            </div>
          </div>
        </div>
        <div class="product">
          <img
            class="product__cover"
            src="./assets/img/product_08.webp"
            alt="" />
          <div class="product__info">
            <div class="product__title product__title--supermarket">
              金锣 火腿肠 无淀粉加钙金锣王 30g*8支出游露营烧烤肠
            </div>
            <div class="product__row">
              <div class="product__price">
                <span class="big_txt">¥11</span>.84
              </div>
              <div class="product__ticket">
                <img src="./assets/img/icon_ticket.png" alt="" />
                <span class="txt">满200减20</span>
              </div>
            </div>
            <div class="product__row">
              <div class="product__tag">
                <img src="./assets/img/icon_autotrophic.png" alt="" />
              </div>
              <div class="product__comment">20万+条评论</div>
              <div class="product__similarity">看相似</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页卡栏 -->
    <footer class="tabbar">
      <div class="tab">
        <img src="./assets/img/tabbar_home.png" alt="" />
      </div>
      <div class="tab">
        <img src="./assets/img/tabbar_category.png" alt="" />
      </div>
      <div class="tab">
        <img src="./assets/img/tabbar_cart.png" alt="" />
      </div>
      <div class="tab">
        <img src="./assets/img/tabbar_profile.png" alt="" />
      </div>
    </footer>
  </body>
</html>
